<style>
.mimo-checkbox{line-height:38px;}
.mimo-checkbox label{margin-right:15px;}
.checkcloth input:focus{background-color:#ffffcc;}
.checkcloth select:focus{background-color:#ffffcc;}
.checkcloth button:focus{font-size:20px;font-weight:bold}
.checkcloth input[type=checkbox]:focus{width: 18px;height: 18px;}
.checkcloth .mes-width{border: 1px solid #eee; height: 38px; line-height: 38px; display: block;padding-left: 10px;}
</style>
<div class="checkcloth">
	<table width="100%">
		<tr>
			<td width="60%" valign="top">

				<form class="layui-form" action="">
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">订单号/采购批号</label>
							<div class="layui-input-inline">
								<input type="text" name="client_ordernum" id="client_ordernum" next="material_id" last="btnreset" value="" max="9999999999" min="1" maxlength="20" tabindex="1" autocomplete="off" class="layui-input client-ordernum mimo-tab required">
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">面料名称</label>
							<div class="layui-input-inline">
								<select name="material_id" id="material_id" next="cloth_num" last="client_ordernum" class="mimo-tab" tabindex="2" lay-ignore style="height:36px;line-height:36px; border:1px solid #E6E6E6; width:190px;">
								</select>
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">布号</label>
							<div class="layui-input-inline">
								<input type="text" name="cloth_num" id="cloth_num" next="length" last="material_id" tabindex="3" max="999" min="1" maxlength="3" lay-verify="required|mimoint" autocomplete="off" class="layui-input mimo-tab required">
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">验布米长</label>
							<div class="layui-input-inline">
								<input type="text" name="length" id="length" next="true_fabric_width" last="cloth_num" tabindex="4" max="300" min="1" maxlength="6" lay-verify="required|number" autocomplete="off" class="layui-input mimo-tab required">
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">实量布封</label>
							<div class="layui-input-inline">
								<input type="text" name="true_fabric_width" id="true_fabric_width" next="rejects_length" last="length" tabindex="5" max="{:config('mp.fabric_width_max')}" min="{:config('mp.fabric_width_min')}" maxlength="6" lay-verify="required|number" autocomplete="off" class="layui-input mimo-tab required">
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">MES布封</label>
							<div class="layui-input-inline">
								<span class="mes-width"></span>
							</div>
						</div>
						
                        <div class="layui-inline">
							<label class="layui-form-label">总公斤</label>
							<div class="layui-input-inline">
								<input type="text" name="total_weight" id="total_weight" next="total_weight" last="total_weight" tabindex="6" max="300" min="0" maxlength="6" lay-verify="mimonumber" autocomplete="off" class="layui-input mimo-tab">
							</div>
						</div>
                        <div class="layui-inline">
							<label class="layui-form-label">克重</label>
							<div class="layui-input-inline">
								<input type="text" name="meter_weight" id="meter_weight" next="meter_weight" last="meter_weight" tabindex="6" max="300" min="0" maxlength="6" lay-verify="mimonumber" autocomplete="off" class="layui-input mimo-tab">
							</div>
						</div>
                        <div class="layui-inline">
							<label class="layui-form-label">次品米长</label>
							<div class="layui-input-inline">
								<input type="text" name="rejects_length" id="rejects_length" next="rejects_id_1" last="true_fabric_width" tabindex="6" max="300" min="0" maxlength="6" lay-verify="mimonumber" autocomplete="off" class="layui-input mimo-tab required">
							</div>
						</div>
						<div class="layui-block">
							<label class="layui-form-label">次品类型</label>
							<div class="layui-input-block mimo-checkbox">
								{volist name="rejectsKV" id="v"}
								<label><input type="checkbox" name="rejects_id[]" id="rejects_id_{$i}" next="{if $i==$rejectsCount }btnsave{else /}rejects_id_{$i+1}{/if}" last="{if $i==1 }rejects_length{else /}rejects_id_{$i-1}{/if}" tabindex="7" class="mimo-tab" lay-ignore value="{$v}">{$v}</label>
								{/volist}
							</div>
						</div>
                        <div class="layui-block" style="margin-bottom:8px;margin-left:10px;"> 备注：验布米长数可通过填写实量布封，总公斤，克重获取，公式：总米长=1/克重/实量布封*总公斤</div>
						<div class="layui-form-item">
							<div class="layui-input-block" style="margin-left:inherit;text-align:center;">
                            
								<button type="submit" id="btnsave" class="layui-btn mimo-tab" next="btnrejects" last="rejects_id_{$rejectsCount}" lay-submit="" tabindex="100" lay-filter="save">验布确认</button>
								<button type="submit" id="btnrejects" class="layui-btn layui-btn-danger mimo-tab" next="btnreset" last="btnsave" lay-submit="" tabindex="101" lay-filter="rejects">次品退料</button>
								<button type="reset" id="btnreset" class="layui-btn layui-btn-primary mimo-tab" next="client_ordernum" last="btnrejects" tabindex="102" >重置</button>&nbsp;
                                <a class="layui-btn layui-btn-warm" style="margin-left:5px;" lay-event="delete" onclick="getTrueMeter(this)">计算验布米长</a>
                                
                                
							</div>
						</div>
					</div>
				</form>
				
			</td>
			<td width="40%" style="border-left: 3px solid #B8D0D6" valign="top">
				<table id="dataTable"></table>
			</td>
		</tr>
	</table>

</div>
<script type="text/html" title="订单号/采购批号" id="client_ordernumTpl">
	{{# if (d.is_return==1){ }}
	<span class="layui-badge">退</span>
	{{# } }}
	{{# if (d.stock_m_type==0){ }}
	<span class="copy-item">{{d.client_ordernum}}</span>
	{{# }else { }}
	<span class="copy-item">B{{d.order_material_id}}</span>
	{{# } }}
</script>
{include file="system@block/layui" /}

<script type="text/javascript">
    layui.use(['table', 'jquery', 'layer', 'form', 'tool'], function() {
    	var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        
        table.render({
            elem: '#dataTable'
            ,url: '{:url("todayLog")}' //数据接口
            ,page: true //开启分页
            ,skin: 'row'
            ,even: true
            ,limit: 20
            ,limits: [20,50,100,150,200]
            ,text: {
                none : '暂无相关数据'
            }
            ,toolbar: false
            ,cols: [[ //表头
                {field: 'seq', title: '序号',width:60}
				,{field: 'client_ordernum', title: '订单号/采购批号', templet: '#client_ordernumTpl'}
			    ,{field: 'material_name', title: '面料'}
                ,{field: 'cloth_num', title: '布号',width:80}
                ,{field: 'length', title: '米长',width:80}
                ,{field: 'true_fabric_width', title: '布封',width:80}
                ,{field: 'caichuang_type_text', title: '裁剪类型'}
            ]]
        });
        
        window.resetCheckcloth = function(){
        	$('input[name="cloth_num"]').val('');
        	$('input[name="length"]').val('');
        	$('input[name="true_fabric_width"]').val('');
        	$('input[name="rejects_length"]').val('');
        	$("input[name^='rejects_id']").attr("checked", false);
			form.render('checkbox');
        };
        
        // 上下键切换
        $(document).on('keyup','.mimo-tab',function(e){
        	if(e.keyCode == 40) {
        		var objNext = $(this).attr('next');
        		if (typeof(objNext) != "undefined") {
        			$('#'+objNext).focus();
        		}
        	}
        	if(e.keyCode == 38) {
        		var objLast = $(this).attr('last');
        		if (typeof(objLast) != "undefined") {
        			$('#'+objLast).focus();
        		}
        	}
        });
        
     	// 获取面料
     	var widthList = null;
		$(document).on('blur','.client-ordernum',function(){
			var clientOrdernum = $(this).val();
			if (clientOrdernum!='') {
				$.ajax({
		 		   type: "POST",
		 		   url: "{:url('checkclothShrink/getMaterialList')}",
		 		   data: "client_ordernum="+clientOrdernum,
		 		   dataType:"json",
		 		   success: function(res){
		 			  if (res.code == 1) {
		 				 widthList = res.data.widthList;
		 				 var option = '';
		 				 for (var x in res.data.list) {
		 					 option = option + '<option value="'+x+'">'+res.data.list[x]+'</option>';
		 				 }
		 				 $('#material_id').html(option);
		 				 if(Object.keys(res.data.list).length == 1) {
		 					 $('#cloth_num').focus();
		 				 }
		 				 materialIdChange();
					  } else {
                          layer.alert(res.msg, {
                            icon: 2,
                            skin: 'layer-ext-demo' //见：扩展说明
                          })
						 //layer.msg(res.msg, {icon: 2,anim: 6});
					  }
		 		   }
		 		});
			} else {
				$('#material_id').html('');
				materialIdChange();
			}
		});
        
		// 监听物料切换，显示mes幅宽
		window.materialIdChange = function() {
			var materialId = $("#material_id").val();
			if (materialId != '') {
				var mesWidth = widthList[materialId];
				$(".mes-width").html(mesWidth);
			} else {
				$(".mes-width").html('');
			}
		}
		
		// 监听物料切换事件
        $(document).on('change','#material_id',function(e){
        	materialIdChange();
        });
		
		//监听提交
		form.on('submit(save)', function(data){
			submitCheckcloth('save', '{:url("save")}', data.field);
			return false;
		});
		form.on('submit(rejects)', function(data){
			submitCheckcloth('rejects', '{:url("rejects")}', data.field);
		    return false;
		});
		window.getTrueMeter=function(tag){
			//true_fabric_width 实量布封   meter_weight   total_weight
			var true_fabric_width= parseFloat($("#true_fabric_width").val());
			var meter_weight=parseFloat($("#meter_weight").val());
			var total_weight=parseFloat($("#total_weight").val());
			if(true_fabric_width==0 || meter_weight==0 || total_weight==0 || isNaN(true_fabric_width) || isNaN(meter_weight) || isNaN(total_weight)){
				alert("实量布封 或 克重 或总公斤数未填写,或填写有误");return;
			}
			var trueTotalMeter=1/(true_fabric_width/100)/(meter_weight/1000)*total_weight;
			$("#length").val(trueTotalMeter.toFixed(2));
		}
		window.submitCheckcloth = function(action, url, d) {
		    if (d.length > 300 || d.length < 1) {
				layer.msg('验布米长范围1-300', {icon: 2,anim: 6});
				$('input[name="length"]').select();
				return false;
			}
			if (d.true_fabric_width > {:config('mp.fabric_width_max')} || d.true_fabric_width < {:config('mp.fabric_width_min')}) {
				layer.msg("实量布封范围{:config('mp.fabric_width_min')}-{:config('mp.fabric_width_max')}", {icon: 2,anim: 6});
				$('input[name="true_fabric_width"]').select();
				return false;
			}
			if (d.rejects_length == '' && action == 'rejects') {
				layer.msg('请填写次品米长', {icon: 2,anim: 6});
				$('input[name="rejects_length"]').select();
				return false;
			}
			if (d.rejects_length != '' && (d.rejects_length > 300 || d.rejects_length < 0)) {
				layer.msg('次品米长范围0-300', {icon: 2,anim: 6});
				$('input[name="rejects_length"]').select();
				return false;
			}
			
			var ckbox = [];
		    $("input[name^='rejects_id']:checked").each(function() {
		    	ckbox.push($(this).val());
		    });
		    if (ckbox.length == 0 && action == 'rejects') {
		    	layer.msg('请选择次品类型', {icon: 2,anim: 6});
				return false;
		    }
		    
			$.ajax({
                    type: "POST",
                    url: url,
                    data: d,
                    dataType:"json",
                    success: function(res){
                        if (res.code == 1) {
                            layer.msg(res.msg, {icon: 1});
                            resetCheckcloth();
                            table.reload('dataTable');
                            if(res.data['exception']==1){
                                layer.confirm(res.data['msg'], {
                                    btn: ['知道了']
                                });
                            }
                        }else if(res.code == -2) {
                            layer.msg(res.msg, {icon: 2,anim: 6});
                        }else {
                            layer.msg(res.msg, {icon: 2,anim: 6});
                        }
                    }
		 	});
		}
		
		var regFloat = /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/; // 浮点数，小数点后两位
		var regInt = /^\d+$/; // 整数
        form.verify({
        	mimonumber: function(value, item){
        	    if (value=='') return '';
        	    if(! regFloat.test(value)){
        	    	return '只能填写数字';
        	    }
        	},
        	mimoint: function(value, item){
        	    if (value=='') return '';
        	    if(! regInt.test(value)){
        	    	return '只能填写数字';
        	    }
        	}
        });
    });
</script>